<template>
	<view>
		<map id="map" scale="18" :longitude="from.longitude" :latitude="from.latitude" :enable-poi="true" class="map"
			:style="mapStyle" :polyline="polyline" :markers="markers" @longpress="showHandle">
			<image class="location" src="../static/workbench/location.png" @tap="returnLocationHandle()" />
		</map>
		<view class="panel" v-show="infoStatus">
			<view class="info">
				<view class="label">剩余</view>
				<view class="value">{{ distance }}公里</view>
				<view class="label">，预计</view>
				<view class="value">{{ duration }}分钟</view>
				<view class="more" @tap="toOrderDetail">订单详情</view>
			</view>
			<view class="opt">
				<button class="cancel-btn" :style="cancelStyle">取消订单</button>
				<button class="confirm-btn" v-if="status == 2||status == 3" @tap="driverArriviedHandle">司机到达</button>
			</view>
		</view>
	</view>
</template>

<script>
	let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');

	import GtPush from '../../lib/gtpush-min.js'
	let qqmapsdk;
	export default {
		data() {
			return {
				orderNo: null,
				status: null,
				mode: "driving",
				cancelStyle: '',
				map: null,
				mapStyle: '',
				from: {
					latitude: 0,
					longitude: 0,
				},
				to: {
					latitude: 0,
					longitude: 0,
				},
				distance: 0,
				duration: 0,
				polyline: [],
				markers: [],
				driverLocationTimer: null,
				infoStatus: true,
				pullBillTimer: null
			};
		},
		methods: {
			// 加载订单的位置 ：结束位置
			loadOrderLocation() {
				let _this = this;
				_this.get("/order/app/order/load/orderLocatin/" + _this.orderNo, (res) => {
					let {
						success,
						data
					} = res.data;
					if (success && data) {
						// 如果订单状态为 已接单 则  订单的结束位置 就是订单的，开始位置
						if (data.status == _this.orderStatus.ORDER_STATUS_ACCEPTED) {
							_this.to.latitude = data.startPlaceLatitude;
							_this.to.longitude = data.startPlaceLongitude;
							//定时拉取司机的坐标
							_this.pullDriverLocation();
							_this.createCrontabPullOrder();
						} else if (data.status == _this.orderStatus.ORDER_STATUS_ARRIVE || data.status == _this
							.orderStatus.ORDER_STATUS_START_DRIVING) {
							//已经到达，或者 开始代驾，路线规划的结束位子是订单的结束位子
							_this.to.latitude = data.endPlaceLatiude;
							_this.to.longitude = data.endPlaceLongitude;
							//定时拉取司机的坐标
							_this.pullDriverLocation();
							_this.createCrontabPullOrder();
						}
					}
				})
			},

			// 跳转订单详情页
			toOrderDetail() {
				let _this = this;
				uni.navigateTo({
					url: "../order/order?orderNo=" + _this.orderNo
				})
			},
			//初始化地图
			initMap() {
				let _this = this;
				_this.map = uni.createMapContext("map");
				//初始化腾讯地图
				qqmapsdk = new QQMapWX({
					key: _this.Consts.QQMAP_KEY
				});
			},
			//路线规划
			linePlan() {
				let _this = this;
				qqmapsdk.direction({
					//模式：驾车
					mode: _this.mode,
					//路线规划开始位置
					from: {
						latitude: _this.from.latitude,
						longitude: _this.from.longitude
					},
					//路线规划结束位子
					to: {
						latitude: _this.to.latitude,
						longitude: _this.to.longitude
					},
					success: function(res) {
						var ret = res;
						//方案整体距离（米）（米转换为千米）
						let distance = ret.result.routes[0].distance / 1000.0;
						//方案估算时间（分钟）
						let duration = ret.result.routes[0].duration;
						_this.distance = distance;
						_this.duration = duration;
						//拿到路线规划结果中的路线坐标 ， pl是用来装经纬度数组的集合
						var coors = ret.result.routes[0].polyline,
							pl = [];
						//坐标解压（返回的点串坐标，通过前向差分进行压缩）
						var kr = 1000000;
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						//将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
						_this.from.latitude = pl[0].latitude;
						_this.from.longitude = pl[0].longitude;

						_this.polyline = [{
							points: pl,
							color: '#FF0000DD',
							width: 3
						}];

						//绘制开始位置和结束位子的图标
						_this.markers = [{ //开始位置图标
								id: 1,
								latitude: _this.from.latitude,
								longitude: _this.from.longitude,
								title: "开始位置",
								iconPath: "/static/move/driver-icon.png",
								height: 40

								//iconPath:"https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png"
							},
							{ //结束位置图标
								id: 2,
								latitude: _this.to.latitude,
								longitude: _this.to.longitude,
								title: "结束位置",
								iconPath: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png"
							}
						]
					},
					fail: function(error) {
						uni.showToast({
							title: "路线绘制失败",
							icon: "error"
						})
					}
				});
			},

			// 关闭定时任务
			stopLoadNewOrderTimer() {
				let _this = this;
				if (_this.driverLocationTimer) {
					clearInterval(_this.driverLocationTimer)
					_this.driverLocationTimer = null;
				}
			},
			//  乘客拉取司机坐标
			pullDriverLocation() {
				let _this = this;
				_this.get("/order/app/order/pull/driverLocation/" + _this.orderNo, (res) => {
					let {
						success,
						data
					} = res.data;;
					if (success) {
						_this.from.latitude = data.latitude;
						_this.from.longitude = data.longitude
						// 规划路线
						_this.linePlan()
						// 关闭拉取订单的定时任务
						_this.stopLoadNewOrderTimer();
					}

				})
			},
			// 创建定时任务司机坐标
			createCrontabPullOrder() {
				let _this = this;
				// 如果已有订单的定时器就不用创建
				if (_this.driverLocationTimer) return;
				_this.driverLocationTimer = setInterval(() => {
					_this.pullDriverLocation();
				}, 5000)
			},
			toOrderDetail() {
				let _this = this;
				uni.navigateTo({
					url: "../order/order?orderNo=" + _this.orderNo
				})
			},
			initStyle() {
				let _this = this;
				//设置地图控件的高度适配屏幕高度
				let windowHeight = uni.getSystemInfoSync().windowHeight;
				_this.windowHeight = windowHeight;
				_this.mapStyle = `height:${_this.windowHeight}px;`;
			},
		},
		onLoad: function(options) {
			let _this = this;
			console.log(options.orderNo);
			// 给订单赋值 这是由上一个页面传递过来的
			_this.orderNo = options.orderNo;
			_this.initStyle();
			// 初始化地图
			_this.initMap()
			// 加载订单的位置 ：结束位置
			_this.loadOrderLocation()

		},
		onShow: function() {
			let _this = this;
			// 创建定时任务司机坐标
			_this.createCrontabPullOrder()
		},
		onHide: function() {
			let _this = this;
			// 创建定时任务司机坐标
			_this.createCrontabPullOrder()
		},
		onUnload() {
			let _this = this;
			//关闭定时任务
			_this.stopLoadNewOrderTimer();
		}
	};
</script>

<style lang="less">
	@import url('move.less');
</style>